<style rel="styleesheet" lang="less">
  @media screen and (min-width: 829px) {
    .trainingInfo {
      background-color: #F6F7FB;
      overflow: hidden;
      width: 100%;
      .active {
        color: #F37D0A
      }
      .btn-box,
      .type {
        display: none
      }
      .wrapTraining {
        /*border: 1px solid blue;*/
        width: 80%;
        height: 100%;
        margin: 0 auto;
        /*background-color:#FBFBFE;*/
        .kind {
          margin-top: 3.5rem;
          margin-bottom: 1rem;
          height: 2.43rem;
          ul {
            position: relative;
          }
          ul li {
            float: left;
            font-size: 1.57rem;
            cursor: pointer;
            margin-right: 3.5rem;
          }
          ul li:last-child {
            margin-right: 0
          }
          ul .active {
            color: #F37D0A;
          }
        }

        .search {
          margin-top: 3.5rem;
          margin-bottom: 1rem;
          height: 2.43rem;
          position: relative;
          .searchBox {
            float: right;
            width: 20.71rem;
            height: 2.43rem;
            background: rgba(255, 255, 255, 1);
            border: 1px solid #CCCCCC;
            border-radius: 1.14rem;
            padding-left: 15px;
          }
          .searchLogo {
            font-size: 1.5rem;
            cursor: pointer;
            position: absolute;
            right: 0.5rem;
            top: 0.5rem;
          }
        }

        .content li {
          clear: both;
          width: 100%;
          /*border-bottom: 1px solid #F3A40A;*/
          border-radius: 0.43rem;
          margin-top: 3.43rem;
          background-color: white;
          .liWrap {
            position: relative;
            border-bottom: solid 1px #ccc;
            margin: 0 2.2rem;
            padding-bottom: 2rem;
            .title {
              margin-top: 2.79rem;
              font-size: 1.43rem;
              
              color: rgba(51, 51, 51, 1);
              line-height: 1.43rem;
            }
            .leader {
              margin-top: 2.07rem;
            }
            p {
              margin-top: 0.9rem;
              color: #666666;
              font-size: 1rem;
              
              color: rgba(153, 153, 153, 1);
            }
            .apply img {
              position: absolute;
              bottom: 2rem;
              right: 6.14rem;
            }
            .apply span{
              position: absolute;
              bottom: 2rem;
              right: 3rem;
              color:#ec9f0a
            }
            .applyWord {
              position: absolute;
              bottom: 2rem;
              right: 3.21rem;
            }
          }
        }
        .ing {
          border-top: 5px solid #F3A40A;
        }
        .over {
          border-top: 5px solid #CCCCCC;
        }
      }
      .file-box {
        background-color: #fff;
        text-align: center;
        min-height: 30rem;
        margin-bottom: 2rem;
        img {
          width: 44rem;
        }
      }
      #sign_v{
        display: none;
      }
    }
  }

  @media screen and (max-width: 829px) {
    .trainingInfo {
      background-color: #F6F7FB;
      height: 100%;
      * {
        box-sizing: border-box;
      }
      .content {
        width: 100%;
        clear: both;
      }
      .kind {
        font-size: 0.28rem;
        font-weight: bold;
        background-color: #FFFFFF;
        padding-left: 0.3rem;
        margin-bottom: 0.16rem;
        li {
          display: inline-block;
          margin-right: 0.5rem;
          color: #3E3A39;
          line-height: 1.05rem;
        }
        li:last-child {
          margin-right: 0
        }
        li.active {
          color: #FD9D40
        }
      }
      .search {
        background-color: #FFFFFF;
        height: 1.05rem;
        line-height: 1.05rem;
        text-align: center;
        .searchBox {
          display: none
        }
        .icon-search {
          font-size: 0.5rem;
        }
      }
      .ing,
      .over {
        background-color: #fff;
        margin-bottom: 0.16rem;
        padding: 0 0.32rem;
        position: relative;
        .title {
          font-size: 0.32rem;
          padding: 0.5rem 0;
          font-weight: bold;
        }
        p {
          font-size: 0.26rem;
          color: #888;
          padding: 0.1rem 0;
          span {
            display: inline-block;
            width: 75%;
            vertical-align: top;
          }
        }
      }
      .apply {
        display: none
      }
      .btn-box {
        position: fixed;
        width: 100%;
        left: 0;
        bottom: 0;
        padding: 0.1rem 0.3rem;
        background: #fff;
        box-shadow: 0 0 35px 0px rgba(0, 0, 0, 0.1);
      }
      #sign{
        display: none;
      }
      #sign_v {
        width: 100%;
        line-height: 0.9rem;
        font-size: 0.32rem;
        vertical-align: top;
        background-color: #FD9D40;
      }
      .file-box {
        img {
          width: 100%;
          display: block;
        }
      }
    }
  }

</style>
<template>
  <div class="trainingInfo" v-loading.fullscreen.lock="fullscreenLoading">
    <div class="wrapTraining">
      <el-row>
        <ul class="content">
          <li :class="trainingInfo.State!=1?'over':'ing'">
            <div class="liWrap">
              <h3 class="title">{{trainingInfo.Name}}</h3>
              <p class="leader">主&nbsp;&nbsp;讲&nbsp;人：<span>{{trainingInfo.TeachersName}}</span></p>
              <p>培训地点：<span>{{trainingInfo.Address}}</span></p>
              <p>培训对象：<span>{{trainingInfo.Target}}</span></p>
              <p>培训人数：<span>{{trainingInfo.Number}}</span></p>
              <p>培训时间：<span>{{$bw.format(trainingInfo.StartTime,'date')}}</span></p>
              <p>报名截止：<span>{{$bw.format(trainingInfo.DeadLineTime,'dateTime')}}</span></p>
              <!--<div class="apply">-->
                <!--<img src="../../static/img/报名.png" alt=""  style="cursor: pointer" v-show="trainingInfo.State==1" @click="apply">-->
                <!--<span style="cursor: pointer" @click="apply" v-show="trainingInfo.State==1">报名</span>-->

                <!--&lt;!&ndash;<img src="../../static/img/已结束.png" alt="" v-show="trainingInfo.State!=1">&ndash;&gt;-->
                <!--&lt;!&ndash;<img src="../../static/img/报名中.png" alt="" v-show="trainingInfo.State==1" style="cursor: pointer" @click="apply">&ndash;&gt;-->
                <!--<img src="../../static/img/已结束.png" alt="" v-show="trainingInfo.State==4">-->
                <!--<img src="../../static/img/报名结束.png" alt="" v-show="trainingInfo.State==2">-->
                <!--<img src="../../static/img/未开始.png" alt="" v-show="trainingInfo.State==0">-->
                <!--<img src="../../static/img/进行中.png" alt="" v-show="trainingInfo.State==3">-->
              <!--</div>-->
              <!--<div class="btn-box">-->
                <!--<span id="sign" class="bw-btn bw-btn-warning" v-show="trainingInfo.State==1" @click="apply">报名</span>-->
                <!--<span id="sign_v" class="bw-btn bw-btn-warning" v-show="trainingInfo.State==1" @click="apply">报名</span>-->
              <!--</div>-->
            </div>
            <div class="file-box" v-html="trainingInfo.Introduce">

            </div>
          </li>
        </ul>
      </el-row>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        searchData: "",
        num: 1,
        fullscreenLoading: false,
        PageSize: 10,
        trainingInfo:{},
        userInfo:{}
      }
    },
    components: {

    },
    methods: {
//    routerGo(url) {
//      this.$router.push(url)
//    },
      apply() {
        if(!this.userInfo.AccessToken){
          this.$message({ message: '请先登录', type: 'error' });
        }else {
          this.$router.push({path: '/trainingTrainingApply',query: {trainId: this.trainingInfo.TrainId}})
        }
      },
      active(index) {
        this.num = index
      },
      getList(){
        let trainId = this.$route.query.trainId
        this.$service('/api/TrainClass/GetModel?trainId='+trainId, 'get', {}).then((response) => {
          this.fullscreenLoading = false;
          this.trainingInfo=response.Data
          console.info(response.Data)
        })
          .catch(err => {
            this.fullscreenLoading = false;
          })
      }
    },
    props:['rootInfo'],
    mounted() {
      this.getList();
      if(document.body.offsetWidth || window.screen.width <829){
        this.rootInfo.showFooter=false;
      }else {
        this.rootInfo.showFooter=true;
      }
      if (this.$bw.getStorage("userInfo")) {
        this.userInfo = this.$bw.getStorage("userInfo");
      }
    },
  }

</script>
